<template>
  <!-- v-waterMarker
v-waterMarker -->
  <el-card>
    <!-- <button @click="cli1">坎坎坷坷</button> -->
    <Search
      :list="formList"
      @submitForm="searchPage"
      @resetForm="resetForm"
      ref="search"
    >
      <div class="box-slot">
        <div class="box-item">
          <Form
            :list="formArr"
            :defaultValue="defaultValue"
            @submitForm="searchPage1"
            ref="formLockl"
          ></Form>
        </div>
      </div>
    </Search>
    <!-- :icon="Tickets" -->
    <!-- <el-button type="primary" @click="cliSelect1">高级查询</el-button> -->
  </el-card>
  <el-card>
    <div class="btn-list">
      <!-- <el-button type="primary" @click="cliAdd">新增</el-button> -->
    </div>
    <div class="btn-list">
      <el-button type="primary" @click="cliAdd">新增</el-button>
      <!-- <el-button type="primary" @click="cliAdd1">新增弹框</el-button> -->
    </div>
    <!--    style="width: 100%" -->
    <el-table
      max-height="450"
      :data="tableData.list"
      stripe
      border
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="55" fixed />
      <el-table-column type="index" label="序号" width="55" fixed />
      <el-table-column
        prop="a1"
        label="项目名称"
        width="250"
        align="center"
        fixed
      >
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.projectName"
            placement="top"
          >
            <span class="outOfHiding">{{ scope.row.projectName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        prop="infoNumber"
        label="项目编号"
        width="150"
        align="center"
        fixed
      />
      <el-table-column
        prop="applyStartTime"
        label="报名开始时间"
        align="center"
        width="180"
        fixed
      />
      <el-table-column
        prop="applyEndTime"
        label="报名截止时间"
        width="150"
        align="center"
        fixed
      />
      <el-table-column
        prop="announcementTime"
        label="公告发布时间"
        width="150"
        align="center"
      />
      <el-table-column
        prop="auctionStartTime"
        label="拍卖开始时间"
        width="150"
        align="center"
      />
      <el-table-column
        prop="backletterEndTime"
        label="监管金额到账截止时间"
        width="150"
        align="center"
      />
      <el-table-column
        prop="backletterMoney"
        label="监管金额"
        width="150"
        align="center"
      />
      <el-table-column
        prop="biddingStartTime"
        label="限时竞价开始时间"
        width="150"
        align="center"
      />
      <el-table-column
        prop="periodTransfer"
        label="出让年限"
        width="150"
        align="center"
      />
      <el-table-column
        prop="administrativeRegion"
        label="所属行政区"
        width="150"
        align="center"
      />
      <el-table-column
        prop="startingPrice"
        label="起始价"
        width="150"
        align="center"
      />
      <el-table-column
        prop="rangePrice"
        label="竞价增加幅度"
        width="150"
        align="center"
      />
      <el-table-column
        prop="diggingsAddress"
        label="采矿权位置"
        width="150"
        align="center"
      />
      <el-table-column
        prop="miningWay"
        label="开采方式"
        width="150"
        align="center"
      />
      <el-table-column
        prop="resourceReserve"
        label="资源储备"
        width="150"
        align="center"
      />
      <!-- <el-table-column
        prop="minerals"
        label="开采矿种"
        width="150"
        align="center"
      /> -->
      <el-table-column
        prop="miningArea"
        label="矿区面积"
        width="150"
        align="center"
      />
      <el-table-column
        prop="designScale"
        label="设计规范"
        width="150"
        align="center"
      />
      <el-table-column
        prop="isFloorPrice"
        label="是否有底价"
        width="150"
        align="center"
      />
      <el-table-column
        prop="resourceType"
        label="资源储备类型"
        width="150"
        align="center"
      />
      <el-table-column
        prop="elavation"
        label="标高"
        width="150"
        align="center"
      />
      <el-table-column
        prop="bidderConditions"
        label="竞买人条件"
        width="150"
        align="center"
      />
      <el-table-column
        prop="exploitRequire"
        label="矿产资源开发利用要求"
        width="200"
        align="center"
      />
      <el-table-column
        prop="status"
        label="发布状态"
        width="150"
        align="center"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="开启"
            inactive-text="关闭"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <div class="btn">
            <!-- <el-button type="primary" @click="cliSelect">发送</el-button> -->
            <el-button type="warning" @click="cliSelect">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Paging
      :total="total"
      :currentPage.sync="currentPage"
      :pageSize.sync="pageSize"
      @pagination="handlePageChange"
    ></Paging>
  </el-card>
  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增项目信息"
    width="70%"
    :before-close="handleClose"
  >
    <div>
      <el-tabs
        v-model="activeNameAdd"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="基础信息" name="first">
          <el-form :model="form" :inline="true">
            <el-form-item label="项目名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="项目编号">
              <el-date-picker
                type="datetime"
                placeholder="Select date and time"
              />
            </el-form-item>
            <el-form-item label="报名时间">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="公告发布时间">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="拍卖开始时间">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="监管金额到账截止时间">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="监管金额">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="限时竞价开始时间">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="出让年限">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="所属行政区">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="起始价">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="竞价增价幅度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="采矿权位置">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="开采方式">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="资源储备">
              <el-input></el-input>
            </el-form-item>
            <!-- <el-form-item label="开采矿种">
              <el-input></el-input>
            </el-form-item> -->
            <el-form-item label="矿区面积">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="设计规范">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="是否有底价">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="资源储备类型">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="标高">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="竞买人条件">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="矿产资源开发利用要求">
              <el-input></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="附件信息" name="second">
          <el-upload class="upload-demo" drag action="#" multiple>
            <el-icon class="el-icon--upload"></el-icon>
            <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="公告信息" name="three">
          <wordEditor></wordEditor>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          保 存
        </el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 高级查询模态框 -->
  <el-dialog v-model="dialogVisibleS" title="高级查询弹框" width="50%">
    <el-card class="box-card" style="margin: 0">
      <template #header>
        <div class="card-header">
          <span>高级查询</span>
        </div>
      </template>
      <el-form :model="formAdvanced" label-width="120px">
        <el-form-item label="过滤条件匹配:">
          <el-select v-model="formAdvanced.filterCondition" style="width: 100%">
            <el-option label="AND 所有条件都要求匹配" value="and" />
            <el-option label="OR 条件中的任意一个匹配" value="or" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(item, index) in formAdvanced.multiConditionList"
          :key="index"
        >
          <div class="box-search">
            <div class="search-item">
              <el-select
                v-model="item.fieldsName"
                placeholder="选择查询字段"
                style="margin-right: 10px; flex: 4"
              >
                <el-option
                  v-for="itemSon in option.optList"
                  :key="itemSon.value"
                  :label="itemSon.label"
                  :value="itemSon.value"
                />
              </el-select>
              <el-select
                style="margin-right: 10px; flex: 2"
                v-model="item.operator"
              >
                <el-option
                  v-for="itemS in item.matchingTypeList"
                  :key="itemS.value"
                  :label="itemS.label"
                  :value="itemS.value"
                />
              </el-select>
              <el-input
                style="margin-left: 10px; flex: 4"
                v-model="item.content"
                placeholder="请输入值"
              ></el-input>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                margin-left: 10px;
              "
            >
              <el-button :icon="Plus" circle @click="addItem" />
              <el-button :icon="Minus" circle @click="deleteItem(item.id)" />
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <template #footer>
      <div class="dialog-footer-advanced">
        <div>
          <el-button>重置</el-button>
          <el-button>保存查询条件</el-button>
        </div>
        <div>
          <el-button @click="dialogVisibleS = false">关闭</el-button>
          <el-button type="primary" @click="selectList"> 查询 </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import axios from "axios";
import {
  ref,
  reactive,
  defineComponent,
  onMounted,
  getCurrentInstance,
  ComponentInternalInstance,
} from "vue";
import { Plus, Minus } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import wordEditor from "@/views/main/components/wordEditor/index.vue";
// 引入search 组件
import Search from "@/components/basePage/packageSearch/index.vue";

// 引入form 组件
import Form from "@/components/basePage/packageForm/index.vue";
// Tickets
import type { TabsPaneContext, FormInstance } from "element-plus";
// 引入自定义请求库
import { postAction } from "@/utils/system/commonUse";

// 路由跳转
const router: any = useRouter();

onMounted(() => {
  // getSelectList();
  // getIdApi();
  getListApi();
});

const url = reactive({
  getIdUrl: "/project/generateProjectId",
  getListUrl: "/project/queryDataByPage",
});
// 路由传参
const route = useRoute();
const getListApi = () => {
  console.log("route", route);

  const id = route.params.id;
  postAction(`${url.getListUrl}`, {
    size: pageSize.value,
    mount: currentPage.value,
    messageId: id,
  })
    .then((data: any) => {
      console.log("表格数据", data);

      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }

      total.value = data.data.count;
      tableData.list = data.data.data;
    })
    .catch((err) => {
      console.log(err);

      ElMessage.error("表格数据获取失败");
    });
};

const getIdApi = () => {
  const id = route.params.id;
  postAction(`${url.getIdUrl}/${id}`)
    .then((data: any) => {
      console.log(data);
      sessionStorage.setItem("id", data.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

const formLockl = ref();
const cli1 = () => {
  console.log("test", formLockl);
};

const formList = reactive([
  {
    label: "项目名称",
    model: "tgNo",
    placeholder: "请输入项目名称",
  },
  {
    label: "项目名称",
    model: "tgNo51",
    placeholder: "请输入项目名称",
  },
  {
    label: "项目名称",
    model: "tgNo",
    placeholder: "请输入项目名称",
  },
  {
    label: "项目名称",
    model: "tgNo51",
    placeholder: "请输入项目名称",
  },
]);

// 条数
const total = ref(0);
// 长度
const pageSize = ref(10);
// 页码
const currentPage = ref(1);

// 分页器
const handlePageChange = (data: any) => {
  console.log("data", data);

  currentPage.value = data.currentPage;
  pageSize.value = data.pageSize;
  // getList();
};
// 可以取到子组件传递过来的数据
const searchPage = (ruleForm: any) => {
  console.log(ruleForm, "ruleForm");
  // this.getList(ruleForm);
};
// 可以取到子组件传递过来的数据
const searchPage1 = (ruleForm: any) => {
  console.log(ruleForm, "ruleForm===>");
  // this.getList(ruleForm);
};
//获取bus 实例
const Instance = getCurrentInstance()!;
// 重置表单后回调
const resetForm = () => {
  // 发布事件
  // const bus = () => {
  Instance.appContext.config.globalProperties.$bus.emit("resetForm", 213);
  // };
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const activeNameAdd = ref("first");
// 数据
const tableData = reactive({ list: [] });
// 表格渐变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any;
  rowIndex: number;
}) => {
  if (rowIndex === 1) {
    return "warning-row";
  } else if (rowIndex === 3) {
    return "success-row";
  }
  return "";
};
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const cliAdd = () => {
  getIdApi();
  router.push("/projectManage/fillInInformation");
  // dialogVisible.value = true;
};
const cliAdd1 = () => {
  dialogVisible.value = true;
};

// 新增模态框
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const form = reactive({
  name: "",
  value: "",
  time1: "",
  radio: "挂牌公告",
});
// 默认值
const defaultValue = reactive({
  // gas1213132123: "杭州1",
  // comr: "张三",
  // radioModule: "txt",
  // time1: new Date(),
});

// 表单数据
const formArr = reactive([
  {
    label: "1",
    model: "tgNo",
    placeholder: "请输入项目名称",
  },
  {
    type: "select",
    label: "单选",
    model: "radioModule",
    // 控制是否需要选中下拉后就请求数据
    isSelectChange: true,
    options: [
      {
        value: "txt",
        label: "文本",
      },
      {
        value: "狮子",
        label: "狮子",
      },
      {
        value: "老虎",
        label: "老虎",
      },
    ],
  },
  // {
  //   label: "2",
  //   model: "tgNo",
  //   placeholder: "请输入项目名称",
  // },
  // {
  //   type: "select",
  //   label: "单选",
  //   model: "radioModule",
  //   // 控制是否需要选中下拉后就请求数据
  //   isSelectChange: true,
  //   options: [
  //     {
  //       value: "txt",
  //       label: "文本",
  //     },
  //     {
  //       value: "狮子",
  //       label: "狮子",
  //     },
  //     {
  //       value: "老虎",
  //       label: "老虎",
  //     },
  //   ],
  // },
  // {
  //   label: "时间",
  //   type: "date-picker",
  //   model: "time1",
  //   format: "YYYY-MM-DD",
  //   valueFormat: "YYYY-MM-DD",
  //   placeholder: "请选择日期",
  // },
  // {
  //   label: "3",
  //   model: "tgNo",
  //   placeholder: "请输入项目名称",
  // },
  // {
  //   type: "radioButton",
  //   label: "单选",
  //   model: "comr",
  //   itemRadioList: ["张三", "李四"],
  // },
  // {
  //   type: "radio",
  //   label: "单选",
  //   model: "gas1213132123",
  //   borderHideOrShow: true,
  //   itemRadioList: ["北京", "上海", "杭州1"],
  // },
]);

const cliSelect = () => {
  dialogVisible.value = true;
  // router.push("/announcement/managementDetail");
};

// 控制弹框
let dialogVisibleS = ref(false);
type optListT = {
  label: string;
  value: string;
};
const option = reactive({
  optList: <
    | [
        {
          label: string;
          value: string;
        }
      ]
    | null
  >null,
});

const getSelectList = () => {
  axios
    .post(
      `http://192.168.5.175:8080/metaTable/listTableColumn?tableName=taskinfo`
    )
    .then(({ data }) => {
      console.log("data", data);

      option.optList = data.data;

      dialogVisibleS.value = false;
    })
    .catch((err) => {
      dialogVisibleS.value = false;
    });
};

// 高级查询 过滤条件
const formAdvanced = reactive({
  filterCondition: "and",
  tableName: "taskinfo",
  multiConditionList: [
    {
      id: Math.random() * 180 + 60,
      fieldsName: "",
      operator: "",
      options: [
        {
          value: "选项一",
          label: "选项一",
        },
        {
          value: "选项二",
          label: "选项二",
        },
      ],
      matchingTypeList: [
        {
          value: "=",
          label: "等于",
        },
        {
          value: ">",
          label: "大于",
        },
        {
          value: "<",
          label: "大于",
        },
      ],
      // 值
      content: "",
    },
  ],
});
// 添加高级搜索项
const addItem = () => {
  formAdvanced.multiConditionList.push({
    id: Math.random() * 1000 + 60,
    fieldsName: "",
    operator: "",
    options: [
      {
        value: "选项一",
        label: "选项一",
      },
      {
        value: "选项二",
        label: "选项二",
      },
    ],
    matchingTypeList: [
      {
        value: "=",
        label: "等于",
      },
      {
        value: ">",
        label: "大于",
      },
      {
        value: "<",
        label: "大于",
      },
    ],
    // 值
    content: "",
  });
};
// 删除元素
const deleteItem = (idx: number) => {
  console.log("idx", formAdvanced.multiConditionList);

  formAdvanced.multiConditionList = formAdvanced.multiConditionList.filter(
    (item) => {
      return item.id != idx;
    }
  );
};

// 高级查询
const cliSelect1 = () => {
  dialogVisibleS.value = true;
};

// 确认查询列表
const selectList = () => {
  axios
    .post(
      "http://192.168.5.175:8080/mulitCondition/complexCondition",
      formAdvanced
    )
    .then(({ data }) => {
      console.log(data);

      dialogVisibleS.value = false;
    })
    .catch((err) => {
      dialogVisibleS.value = false;
    });
};
</script>

<style lang="scss" scoped>
.box-search {
  display: flex;
  .search-item {
    display: flex;
  }
}
// 高级弹框
.dialog-footer-advanced {
  display: flex;
  justify-content: space-between;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
.demo-tabs {
  width: 100%;
}
.box-slot {
  // display: flex;
  // flex-wrap: wrap;
  // flex-direction: row;
  .box-item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
}
.outOfHiding {
  /* 不换行 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 文本超出时，显示省略标记 */
  text-overflow: ellipsis;
}
</style>
